<?php
echo $this->Html->css('admin/image_lists');
?>

<section class="vbox bg-white">
<header class="bg-white b-b">
    <div class="row m-l-none m-r-none bg-white-only">
        <div class="col-sm-2">
            <h3 class="m-t">Images</h3>
            <!--<p class="block text-muted">Manage your members images!</p>-->
        </div>
        <div class="col-sm-10">
            <div class="m-t">
                <form class="form-inline" role="form" id="search_form">
                    
                    <div class="checkbox m-l-lg m-r-xs">
                        <label>
                            Filter
                        </label>
                    </div>
                    <div class="form-group">
                        <div class="btn-group" data-toggle="buttons">
                            <label class="btn btn-sm btn-info active">
                                <input type="radio" name="tagging" id="untagged" value="untagged"> <i class="fa fa-check text-active"></i>&nbsp; Untagged
                            </label>
                            <label class="btn btn-sm btn-info">
                                <input type="radio" name="tagging" id="tagged" value="tagged"> <i class="fa fa-check text-active"></i>&nbsp; Tagged
                            </label>
                            <input type="hidden" id="tagged_status" value="untagged">
                        </div>
                    </div>
                    
                    <div class="form-group m-l-lg">
                        <div class="input-group input-s-lg m-l-lg">
                            <input type="text" class="form-control input-sm" id="find_tagged_members_search_text" placeholder="Search tagged members">
                            <span class="input-group-btn">
                                <button class="btn btn-sm btn-success" id="find_tagged_members_btn" type="button"><i class="fa fa-search"></i>&nbsp; Find</button>
                            </span>
                        </div>
                    </div>
                    <div class="form-group m-l-lg" style="width: 85px;">
                        <div class="input-s-lg m-l-lg">
                            
                            <button class="btn btn-sm btn-danger" id="delete_images_btn" type="button"><i class="fa fa-trash-o"></i> Delete</button>
                            <button class="btn btn-sm btn-info tagged_btn" id="untag_images_btn" type="button" style="display: none"><i class="fa fa-ban"></i> Untag</button>
                            <button class="btn btn-sm btn-white tagged_btn m-l-lg" id="print_images_btn" type="button" style="display: none" title="Print out all members with images"><i class="fa fa-print"></i> Print</button>
                        </div>
                    </div>
                    
<!--                    <div class="checkbox m-l-lg m-r-xs">
                        <label>
                            Upload Image
                        </label>
                    </div>-->
                    <div class="form-group m-l-lg pull-right">
                        <button
                            type="button"
                            class="btn btn-sm btn-success btn-rounded multiple-file-upload-manager"
                            data-url='<?php echo $this->Html->url(array('controller' => 'Images', 'action' => 'bulk_image_uploads')); ?>'
                            data-save_to="img/org_<?php echo $org_id; ?>"
                            data-max-filesize='2000000'
                            data-filetypes='/(\.|\/)(gif|jpe?g|png)$/i'
                            data-image_max_width='300'
                            data-image_max_height='300'
                            data-number_upload_files='18'
                            data-callback='admin_images.image_upload_callback'>
                            <i class="fa fa-cloud-upload"></i> Upload
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</header> 


<section class="hbox stretch bg-white" style="height: 88%; top: 60px;">
    <section class="scrollable">
    
        <section class="vbox">
            <div class="">
                <div class="text-center m-t-lg clearfix wrapper-lg animated hide" id="galleryLoading">
                    <h1>Member Images</h1>
                    <h3 class="text-muted">Loading member images. Please wait ...</h3>
                    <p class="m-t-lg" id="spinner_wrapper"><i class="fa fa-spinner fa fa-spin fa fa-2x"></i></p>
                </div>
                <div id="gallery" class="gallery animated hide">
                    <section id="image_manager">
                        <div class="row" id="images-list"> <!--  style="height: 710px; overflow: auto;" -->
                            <ul id="images">
                               <!-- <li class="image-item selected_image" data-image-id="31" data-org-mem-image-id="31" style="background-image: url(http://localhost/memberz_files/img/org_21/6%20%283%29.png);">
                                    <div class="click-area" style="width: auto; height: 80%;">&nbsp;</div>
                                    <a href="#" class="closer"><i class=""></i></a>
                                    <div class="tag_area">
                                        <input type="text" class="tag_list input input-medium ui-autocomplete-input" placeholder="Who is this?" data-url="/memberz/images/tag_list" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
                                        <a href="javascript:void(0);" class="tag_remove">
                                            <i class="fa fa-times"></i>
                                        </a>
                                    </div>
                                    <div class="inner-loader text-center hide">
                                        <i class="fa fa-spinner fa-spin fa-3x"></i>
                                    </div>
                                    <div class="mini-blanket hide"></div>
                                </li>-->
                            </ul>
                        </div>
                    </section>
                </div>
            </div>
        </section>
    </section>
</section>
</section>

<input type="hidden" id="images-data-url" value="<?php echo $this->Html->url(array('controller' => 'images', 'action' => 'load_member_images')); ?>" />
<input type="hidden" id="tag-list-url" value="<?php echo $this->Html->url(array('controller' => 'images', 'action' => 'tag_list')); ?>" />
<input type="hidden" id="tag-image-url" value="<?php echo $this->Html->url(array('controller' => 'images', 'action' => 'tag')); ?>" />
<input type="hidden" id="untag-image-url" value="<?php echo $this->Html->url(array('controller' => 'images', 'action' => 'untag')); ?>" />
<input type="hidden" id="delete-image-url" value="<?php echo $this->Html->url(array('controller' => 'images', 'action' => 'delete_images')); ?>" />


<?php echo $this->element('multiple_file_upload_manager'); ?>
<?php
echo $this->Html->script('libs/underscore-min.js');
echo $this->Html->script('app/views/organisations/admin_images.js');
?>